React'ning useFormStatus hook'ini o'rganing: soddalashtirilgan shakl boshqaruvi, yuborish holatlari, xatoliklarni qayta ishlash va foydalanuvchi tajribasini yaxshilash. Misollar va eng yaxshi amaliyotlar keltirilgan.
React useFormStatus: Shakllar Holatini Boshqarish Bo'yicha To'liq Qo'llanma
React 18 da taqdim etilgan useFormStatus hook'i React Server Komponentlari ichidagi shakllarni yuborish holatini boshqarishning kuchli va samarali usulini taqdim etadi. Ushbu hook server harakatlari bilan ishlash uchun maxsus ishlab chiqilgan bo'lib, shakl yuborishlarini bevosita serverda qayta ishlash uchun uzluksiz integratsiyani taklif etadi. U shakl yuborish holatini kuzatish jarayonini soddalashtiradi va shakl kutilayotganligi, muvaffaqiyatli yakunlanganligi yoki xatolikka uchraganligi kabi qimmatli ma'lumotlarni taqdim etadi. Ushbu qo'llanmada useFormStatus ning imkoniyatlari, uning afzalliklari va turli stsenariylarda qo'llanilishini ko'rsatuvchi amaliy misollar o'rganiladi.
Server Actions va useFormStatus'ni Tushunish
useFormStatus ga sho'ng'ishdan oldin, React Server Komponentlari va Server Actions'ni tushunish juda muhim. Server Actions sizga serverda ishlaydigan, React komponentlaringizdan bevosita foydalanish mumkin bo'lgan funksiyalarni aniqlash imkonini beradi. Bu alohida API endpoint'iga ehtiyoj sezmasdan shakl yuborish, ma'lumotlarni olish va boshqa server tomonidagi operatsiyalarni bajarish imkonini beradi.
Keyin useFormStatus hook'i shakl yuborishlari natijasida ishga tushirilgan ushbu Server Actions'ning bajarilishi haqida ma'lumot beradi.
useFormStatus nima?
useFormStatus - bu eng so'nggi shakl yuborish holati haqidagi ma'lumotlarni o'z ichiga olgan obyektni qaytaradigan React hook'i. Bu ma'lumotlar quyidagilarni o'z ichiga oladi:
- pending: Shakl hozirda yuborilayotganligini ko'rsatuvchi mantiqiy (boolean) qiymat.
- data: Yuborish bilan bog'liq
FormDataobyekti. - method: Yuborish uchun ishlatilgan HTTP usuli (odatda 'POST').
- action: Ishga tushirilgan Server Action funksiyasi.
useFormStatus'dan Foydalanishning Afzalliklari
useFormStatus'dan foydalanish bir nechta asosiy afzalliklarni taqdim etadi:
- Soddalashtirilgan Holat Boshqaruvi: Shakl yuborish holatini kuzatish uchun qo'lda holat boshqaruviga bo'lgan ehtiyojni yo'qotadi. Hook yuborish jarayoni davomida avtomatik ravishda yangilanadi.
- Yaxshilangan Foydalanuvchi Tajribasi: Foydalanuvchilarga real vaqtda fikr-mulohazalarni taqdim etadi, masalan, shakl qayta ishlanayotganda yuklanish indikatorlarini ko'rsatish yoki muvaffaqiyatsizlik yuz berganda xato xabarlarini ko'rsatish.
- Toza Kod: Shakl yuborish mantiqini komponent renderidan ajratish orqali yanada deklarativ va qo'llab-quvvatlanadigan kod bazasini yaratishga yordam beradi.
- Server Actions bilan Uzluksiz Integratsiya: Server Actions bilan mukammal ishlash uchun mo'ljallangan bo'lib, shakl yuborishlarini bevosita serverda osonlikcha qayta ishlash imkonini beradi.
useFormStatus'ning Amaliy Misollari
Keling, turli stsenariylarda useFormStatus'dan foydalanishni ko'rsatish uchun bir nechta amaliy misollarni ko'rib chiqaylik.
Yuklanish Indikatori Bilan Asosiy Shakl Yuborish
Ushbu misol shakl yuborilayotganda ko'rsatiladigan yuklanish indikatoriga ega oddiy shaklni namoyish etadi.
Server Action (actions.js):
'use server'
export async function submitForm(formData) {
// Yuklanish holatini namoyish qilish uchun kechikishni simulyatsiya qilish
await new Promise(resolve => setTimeout(resolve, 2000));
const name = formData.get('name');
console.log('Shakl ism bilan yuborildi:', name);
return { message: `Shakl ${name} ismi bilan muvaffaqiyatli yuborildi` };
}
React Komponenti (FormComponent.jsx):
'use client'
import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'
function FormComponent() {
const { pending } = useFormStatus()
return (
)
}
export default FormComponent
Ushbu misolda, useFormStatus'dan olingan pending xususiyati shakl yuborilayotganda kiritish maydoni va tugmani o'chirib qo'yish hamda "Yuborilmoqda..." xabarini ko'rsatish uchun ishlatiladi.
Muvaffaqiyat va Xatolik Holatlarini Boshqarish
Ushbu misol shakl yuborilgandan keyin muvaffaqiyat va xatolik holatlarini qanday boshqarishni ko'rsatadi.
Server Action (actions.js):
'use server'
export async function submitForm(formData) {
// Kechikishni simulyatsiya qilish
await new Promise(resolve => setTimeout(resolve, 2000));
const name = formData.get('name');
if (!name) {
throw new Error('Ism kiritilishi shart');
}
console.log('Shakl ism bilan yuborildi:', name);
return { message: `Shakl ${name} ismi bilan muvaffaqiyatli yuborildi` };
}
React Komponenti (FormComponent.jsx):
'use client'
import { useFormStatus } from 'react-dom'
import { submitForm } from './actions'
import { useState } from 'react'
function FormComponent() {
const { pending } = useFormStatus()
const [message, setMessage] = useState(null);
const [error, setError] = useState(null);
async function handleSubmit(formData) {
try {
const result = await submitForm(formData);
setMessage(result.message);
setError(null);
} catch (e) {
setError(e.message);
setMessage(null);
}
}
return (
)
}
export default FormComponent
Ushbu misolda, handleSubmit funksiyasida try/catch bloki ishlatiladi. Agar Server Action xatolik yuzaga keltirsa, u ushlanadi va foydalanuvchiga ko'rsatiladi. Muvaffaqiyatli yuborilganda muvaffaqiyat xabari ko'rsatiladi.
Murakkab Ma'lumotlar uchun FormData'dan Foydalanish
useFormStatus FormData bilan uzluksiz ishlaydi, bu sizga murakkab ma'lumotlar tuzilmalarini osonlik bilan boshqarish imkonini beradi. Mana fayllarni yuklashni ko'rsatuvchi misol.
Server Action (actions.js):
'use server'
export async function uploadFile(formData) {
// Faylni qayta ishlashni simulyatsiya qilish
await new Promise(resolve => setTimeout(resolve, 2000));
const file = formData.get('file');
if (!file) {
throw new Error('Hech qanday fayl yuklanmadi');
}
console.log('Fayl yuklandi:', file.name);
return { message: `Fayl muvaffaqiyatli yuklandi: ${file.name}` };
}
React Komponenti (FormComponent.jsx):
'use client'
import { useFormStatus } from 'react-dom'
import { uploadFile } from './actions'
import { useState } from 'react'
function FormComponent() {
const { pending } = useFormStatus()
const [message, setMessage] = useState(null);
const [error, setError] = useState(null);
async function handleSubmit(formData) {
try {
const result = await uploadFile(formData);
setMessage(result.message);
setError(null);
} catch (e) {
setError(e.message);
setMessage(null);
}
}
return (
)
}
export default FormComponent
Ushbu misol FormData yordamida fayl yuklashni qanday boshqarishni ko'rsatadi. Server actioni faylni FormData obyektidan oladi va uni qayta ishlaydi. useFormStatus hook'i fayl yuklanayotganda yuklanish holatini boshqaradi.
useFormStatus'dan Foydalanish Bo'yicha Eng Yaxshi Amaliyotlar
useFormStatus'ning afzalliklarini maksimal darajada oshirish uchun ushbu eng yaxshi amaliyotlarni ko'rib chiqing:
- Aniq Foydalanuvchi Fikr-Mulohazalarini Taqdim Etish: Ma'lumot beruvchi yuklanish indikatorlarini ko'rsatish va bir nechta yuborishlarning oldini olish uchun shakl elementlarini o'chirib qo'yish uchun
pendingholatidan foydalaning. - Xatoliklarni To'g'ri Boshqarish: Server Actions'dagi istisnolarni ushlash va foydalanuvchiga qulay xato xabarlarini ko'rsatish uchun xatoliklarni boshqarishni amalga oshiring.
- Ma'lumotlarni Serverda Tasdiqlash: Ma'lumotlar yaxlitligi va xavfsizligini ta'minlash uchun server tomonida tasdiqlashni amalga oshiring.
- Server Actions'ni Qisqa Tutish: Ishlash samaradorligini va qo'llab-quvvatlanishini yaxshilash uchun Server Actions'ni aniq vazifalarga yo'naltiring.
- Maxsus Imkoniyatlarni (Accessibility) Hisobga Olish: To'g'ri yorliqlar, ARIA atributlari va klaviatura navigatsiyasi yordamini ta'minlash orqali shakllaringiz maxsus imkoniyatlarga ega bo'lishini ta'minlang.
Kengaytirilgan Foydalanish Holatlari
Asosiy misollardan tashqari, useFormStatus yanada murakkab stsenariylarda ishlatilishi mumkin:
- Progressiv Yaxshilanish: JavaScript o'chirilgan foydalanuvchilar uchun asosiy tajribani va JavaScript yoqilganlar uchun boyroq tajribani taqdim etish orqali shakllaringizni progressiv ravishda yaxshilash uchun Server Actions va
useFormStatus'dan foydalaning. - Optimistik Yangilanishlar: Shakl yuborilganidan so'ng, yuborish muvaffaqiyatli bo'ladi deb taxmin qilib, UI'ni darhol yangilash orqali optimistik yangilanishlarni amalga oshiring. Agar yuborish muvaffaqiyatsiz bo'lsa, yangilanishni bekor qiling.
- Shakl Kutubxonalari Integratsiyasi: Shakl holati va tasdiqlashini boshqarish uchun
useFormStatus'ni Formik yoki React Hook Form kabi mashhur shakl kutubxonalari bilan integratsiya qiling. Ushbu kutubxonalar ko'pincha o'zlarining holat boshqaruviga ega bo'lsalar ham,useFormStatusserver actioniga yakuniy yuborish bosqichi uchun foydali bo'lishi mumkin.
Xalqarolashtirish (i18n) Uchun Mulohazalar
Global auditoriya uchun shakllar yaratayotganda, xalqarolashtirish (i18n) juda muhim. Mana useFormStatus'dan foydalanganda i18n'ni qanday hisobga olish kerak:
- Mahalliylashtirilgan Xato Xabarlari: Foydalanuvchiga ko'rsatiladigan xato xabarlarining ularning afzal ko'rgan tiliga mahalliylashtirilganligiga ishonch hosil qiling. Bunga xato xabarlarini tarjima fayllarida saqlash va mos tarjimani olish uchun
react-intlyokii18nextkabi kutubxonadan foydalanish orqali erishish mumkin. - Sana va Raqam Formatlash: Sana va raqam formatlashni foydalanuvchining joylashuviga qarab bajaring. Ushbu qiymatlarni to'g'ri formatlash uchun
Intl.DateTimeFormatvaIntl.NumberFormatkabi kutubxonalardan foydalaning. - O'ngdan Chapga (RTL) Qo'llab-quvvatlash: Agar ilovangiz o'ngdan chapga yoziladigan tillarni (masalan, arab, ibroniy) qo'llab-quvvatlasa, shakllaringiz RTL tartiblariga mos ravishda to'g'ri uslublanganligiga ishonch hosil qiling.
- Shaklni Tasdiqlash: Shaklni tasdiqlash qoidalarini turli joylashuvlarga moslashtiring. Masalan, telefon raqamini tasdiqlash mamlakatlar bo'ylab sezilarli darajada farq qilishi mumkin.
Mahalliylashtirilgan Xato Xabarlari Misoli:
// tarjimalar/uz.json
{
"form.error.nameRequired": "Iltimos, ismingizni kiriting.",
"form.success.submission": "Yuborganingiz uchun rahmat!"
}
// tarjimalar/ru.json
{
"form.error.nameRequired": "ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π²Π²Π΅Π΄ΠΈΡΠ΅ Π²Π°ΡΠ΅ ΠΈΠΌΡ.",
"form.success.submission": "Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π°ΡΡ ΠΎΡΠΏΡΠ°Π²ΠΊΡ!"
}
// react-intl'dan foydalanuvchi komponent
import { useIntl } from 'react-intl';
function FormComponent() {
const intl = useIntl();
const [error, setError] = useState(null);
// ...
catch (e) {
setError(intl.formatMessage({ id: 'form.error.nameRequired' }));
}
}
Maxsus Imkoniyatlar (Accessibility) Bo'yicha Mulohazalar
Maxsus imkoniyatlar (Accessibility) inklyuziv veb-ilovalar yaratishning asosiy jihatidir. useFormStatus'dan foydalanganda yodda tutish kerak bo'lgan bir nechta maxsus imkoniyatlar bo'yicha mulohazalar:
- ARIA Atributlari: Yordamchi texnologiyalarga shakl holati haqida ma'lumot berish uchun ARIA atributlaridan foydalaning. Masalan, shakl kutilayotganda yuborish tugmasida
aria-busy="true"dan foydalaning. - Yorliqlar: Barcha shakl maydonlarida
<label>elementi yordamida kiritish elementlari bilan bog'langan aniq va tavsiflovchi yorliqlar mavjudligiga ishonch hosil qiling. - Xato Xabarlari: Xato xabarlarini nogironligi bo'lgan foydalanuvchilar tomonidan osongina seziladigan va tushuniladigan tarzda ko'rsating. Ekran o'quvchilariga xato xabarlarini e'lon qilish uchun
aria-live="assertive"kabi ARIA atributlaridan foydalaning. - Klaviatura Navigatsiyasi: Foydalanuvchilar shaklni faqat klaviatura yordamida kezishi mumkinligiga ishonch hosil qiling. Elementlarning fokus olish tartibini boshqarish uchun
tabindexatributidan foydalaning. - Rang Kontrasti: Shaklda ishlatiladigan matn va fon ranglari ko'rish qobiliyati zaif bo'lgan foydalanuvchilar tomonidan osongina o'qilishi uchun yetarli kontrastga ega ekanligiga ishonch hosil qiling.
useFormStatus va An'anaviy Holat Boshqaruvi Taqqoslanishi
An'anaga ko'ra, React dasturchilari shakl yuborish holatini komponent holati (useState) yoki murakkabroq holat boshqaruv kutubxonalari (masalan, Redux, Zustand) yordamida boshqarishgan. Mana ushbu yondashuvlarning useFormStatus bilan taqqoslanishi:
| Xususiyat | useFormStatus | useState | Tashqi Holat Boshqaruvi |
|---|---|---|---|
| Murakkablik | Past | O'rta | Yuqori |
| Server Actions bilan integratsiya | Uzluksiz | Qo'lda integratsiyani talab qiladi | Qo'lda integratsiyani talab qiladi |
| Shablon Kod | Minimal | O'rtacha | Sezilarli |
| Mos Keladigan Foydalanish Holatlari | Bevosita Server Actions'ga yuboriladigan shakllar | Cheklangan holatga ega oddiy shakllar | Komponentlararo umumiy holatga ega murakkab shakllar |
useFormStatus sizning shakllaringiz bevosita React Server Actions bilan o'zaro aloqada bo'lganda juda samarali. U shablon kodni kamaytiradi va jarayonni soddalashtiradi. Biroq, bir nechta komponentlar o'rtasida umumiy holatga ega juda murakkab shakllar uchun to'liq huquqli holat boshqaruv kutubxonasi hali ham o'rinli bo'lishi mumkin.
Umumiy Muammolarni Bartaraf Etish
useFormStatus'dan foydalanganda duch kelishingiz mumkin bo'lgan ba'zi umumiy muammolar va ularni bartaraf etish usullari:
useFormStatusyangilanmayapti:useFormStatus'niactionprop'i Server Action'ga o'rnatilgan<form>elementi ichida ishlatayotganingizga ishonch hosil qiling.- Server Action to'g'ri aniqlanganligi va eksport qilinganligini tekshiring.
- Server Action'da uning muvaffaqiyatli yakunlanishiga to'sqinlik qilishi mumkin bo'lgan har qanday xatoliklarni tekshiring.
- Xato xabarlari ko'rsatilmayapti:
- Server Action'da xatoliklarni to'g'ri ushlayotganingizga va xato xabarini qaytarayotganingizga ishonch hosil qiling.
- Komponentingizda xato xabarini
errorholati yordamida ko'rsatayotganingizni tekshiring.
- Yuklanish indikatori paydo bo'lmayapti:
- Yuklanish indikatorini shartli ravishda ko'rsatish uchun
useFormStatus'dan olinganpendingholatidan foydalanayotganingizga ishonch hosil qiling. - Server Action haqiqatan ham bajarilishi uchun biroz vaqt talab qilayotganini tekshiring (masalan, kechikishni simulyatsiya qilish orqali).
- Yuklanish indikatorini shartli ravishda ko'rsatish uchun
Xulosa
useFormStatus Server Komponentlaridan foydalanadigan React ilovalarida shakl yuborish holatini boshqarishning toza va samarali usulini taqdim etadi. Ushbu hook'dan foydalanib, siz kodingizni soddalashtirishingiz, foydalanuvchi tajribasini yaxshilashingiz va Server Actions bilan uzluksiz integratsiya qilishingiz mumkin. Ushbu qo'llanma useFormStatus'ning asoslarini, amaliy misollarni va undan samarali foydalanish bo'yicha eng yaxshi amaliyotlarni qamrab oldi. useFormStatus'ni React loyihalaringizga kiritish orqali siz shakllarni qayta ishlashni optimallashtirishingiz va global auditoriya uchun yanada mustahkam va foydalanuvchiga qulay ilovalar yaratishingiz mumkin.